<html>
<head>
<title>Layered Window Demo</title>
<style>
   html  { background:transparent; overflow: hidden; } 
   body  { border-radius:50%; border:3dip solid brown; 
           background:gold; 
           margin:*; 
           size:300dip; 
           horizontal-align:center;
           flow:vertical;
           vertical-align:middle;
           transform:scale(0);
           overflow:hidden;
           font-size:10pt;
           font-family:"Segoe UI", Tahoma, sans-serif;
        }
        
   body.shown 
   {
     transform:scale(1);
     transition: transform back-out 600ms; 
   }
   
   body.hidden 
   {
     transform:scale(0);
     transition: transform linear 600ms; 
   }
  
   body > p { text-align:center; color:black; transition: color linear 1s; }
   
   body > p:hover { text-align:center; color:white; }
   
   body > button { display:block; margin:8dip *; font-rendering-mode:sub-pixel; /*for better font scaling*/ }
   body > select { display:block; margin:8dip *; font-rendering-mode:sub-pixel; /*for better font scaling*/ }
   body > select > popup { font-rendering-mode:snap-pixel; }
   
   button#minimize { background-image: none; background-color:orange; border-radius:4dip; outline: blue glow 0;
      transition: outline linear 300ms; }
   button#minimize:hover{ outline: blue glow 4dip; }
   
   button#hide { background-image: none; background-color:goldenrod; border-radius:4dip; outline: blue glow 0;
      transition: outline linear 300ms; }
   button#hide:hover{ outline: blue glow 4dip;  }
   
   button#close { background-image: none; background-color:red; border-radius:4dip; outline: blue glow 0;
      transition: outline linear 300ms; }
   button#close:hover { outline: blue glow 4dip; } 

   img { size:16dip; foreground-size:cover; }

</style>
<script type="text/tiscript">

  const body = $(body);

  function checkGfx() 
  {
     if(!view.backend)
       view.msgbox(#alert,"Failed to initialize layered window!");
     return ["Unknown","GDI+","D2D/WARP","D2D/DX"][view.backend];
  }
  
  function self.ready()
  {
    // positioning in the middle of the screen:
    var (sx,sy,sw,sh) = view.screenBox(#workarea,#rectw);
    var (w,h) = self.$(body).box(#dimension);
    w += w/2; // to accomodate expanding radii
    h += h/2;
    view.move( sx + (sw - w) / 2, sy + (sh - h) / 2, w, h);

    body.timer(1,:: this.attributes.addClass("shown"));
    body.timer(400, :: $(span#gfx).text = checkGfx() );
  }
  $(#close).onClick = function()
  {
    body.onAnimationEnd = ::view.close();
    body.attributes.removeClass("shown");
  }

  $(#minimize).onClick = function()
  {
    view.state = View.WINDOW_MINIMIZED;
  }

  $(#hide).onClick = function()
  {
    view.state = View.WINDOW_HIDDEN;
    self.timer(1000, function() {
      stdout.println("View.WINDOW_SHOWN");
      view.state = View.WINDOW_SHOWN;
    });
  }

  $(#test).onClick = function()
  {
    this.text = "Tested";
  }

  function movable() // install movable window handler
  {
    var xoff,yoff;
    var dragging = false;
    var body = $(body);
      
    function doDrag()
    {
      while( dragging )
        view.doEvent();
    }
      
    function onMouseDown(evt)
    {
      if( evt.target !== body )
        return false;
      xoff = evt.x;
      yoff = evt.y;
      dragging = true;
      view.root.capture(true);
      doDrag();
      return true;
    }
      
    function onMouseMove(evt)
    {
      if( dragging )
      {
        view.move( evt.xScreen - xoff, evt.yScreen - yoff, true); // true - x,y are coordinates of the client area on the screen
        return true;
      }
      return false;
    }
      
    function stopDrag()
    {
      if(dragging)
      {
        dragging = false;
        view.root.capture(false);
        return true;
      }
      return false;
    }
      
    function onMouseUp(evt) { return stopDrag(); }
    function onKeyDown(evt) { if(evt.keyCode == Event.VK_ESCAPE ) return stopDrag(); }
      
    // hookup event handlers:
    view.root.subscribe(onMouseDown, Event.MOUSE, Event.MOUSE_DOWN );
    view.root.subscribe(onMouseUp, Event.MOUSE, Event.MOUSE_UP );
    view.root.subscribe(onMouseMove, Event.MOUSE, Event.MOUSE_MOVE );
    view.root.subscribe(onKeyDown, Event.KEY, Event.KEY_DOWN );
    return false;
  }
  
  movable();

  self.on("complete", function() {
    stdout.println("got complete");
    //$(button#test).text = "complete";
  });

</script>
</head>
<body>
  <p>Hello, that is layered <span #gfx /> Window</p>

  <button #test>Test</button> 
  <select >
    <OPTION VALUE=0 selected>not specified</OPTION><OPTION VALUE=1 >Afghanistan</OPTION><OPTION VALUE=2 >Albania</OPTION><OPTION VALUE=3 >Algeria</OPTION><OPTION VALUE=4 >American Samoa</OPTION><OPTION VALUE=5 >Andorra</OPTION><OPTION VALUE=6 >Angola</OPTION><OPTION VALUE=7 >Anguilla</OPTION><OPTION VALUE=8 >Antarctica</OPTION><OPTION VALUE=9 >Antigua And Barbuda</OPTION><OPTION VALUE=10 >Argentina</OPTION><OPTION VALUE=11 >Armenia</OPTION><OPTION VALUE=12 >Aruba</OPTION><OPTION VALUE=13 >Australia</OPTION><OPTION VALUE=14 >Austria</OPTION><OPTION VALUE=15 >Azerbaijan</OPTION><OPTION VALUE=16 >Bahamas</OPTION><OPTION VALUE=17 >Bahrain</OPTION><OPTION VALUE=18 >Bangladesh</OPTION><OPTION VALUE=19 >Barbados</OPTION><OPTION VALUE=20 >Belarus</OPTION><OPTION VALUE=21 >Belgium</OPTION><OPTION VALUE=22 >Belize</OPTION><OPTION VALUE=23 >Benin</OPTION><OPTION VALUE=24 >Bermuda</OPTION><OPTION VALUE=25 >Bhutan</OPTION><OPTION VALUE=26 >Bolivia</OPTION><OPTION VALUE=27 >Bosnia and Herzegovina</OPTION><OPTION VALUE=28 >Botswana</OPTION><OPTION VALUE=29 >Bouvet Island</OPTION><OPTION VALUE=30 >Brazil</OPTION><OPTION VALUE=31 >British Indian Ocean Territory</OPTION><OPTION VALUE=32 >Brunei Darussalam</OPTION><OPTION VALUE=33 >Bulgaria</OPTION><OPTION VALUE=34 >Burkina Faso</OPTION><OPTION VALUE=35 >Burundi</OPTION><OPTION VALUE=36 >Cambodia</OPTION><OPTION VALUE=37 >Cameroon</OPTION><OPTION VALUE=38 class="i-am-now-in">Canada</OPTION><OPTION VALUE=39 >Cape Verde</OPTION><OPTION VALUE=40 >Cayman Islands</OPTION><OPTION VALUE=41 >Central African Republic</OPTION><OPTION VALUE=42 >Chad</OPTION><OPTION VALUE=43 >Chile</OPTION><OPTION VALUE=44 >China</OPTION><OPTION VALUE=45 >Christmas Island</OPTION><OPTION VALUE=46 >Cocos (Keeling) Islands</OPTION><OPTION VALUE=47 >Colombia</OPTION><OPTION VALUE=48 >Comoros</OPTION><OPTION VALUE=49 >Congo</OPTION><OPTION VALUE=50 >Congo, Democratic Republic</OPTION><OPTION VALUE=51 >Cook Islands</OPTION><OPTION VALUE=52 >Costa Rica</OPTION><OPTION VALUE=53 >Cote d'Ivoire</OPTION><OPTION VALUE=54 >Croatia</OPTION><OPTION VALUE=55 >Cuba</OPTION><OPTION VALUE=56 >Cyprus</OPTION><OPTION VALUE=57 >Czech Republic</OPTION><OPTION VALUE=58 >Denmark</OPTION><OPTION VALUE=59 >Djibouti</OPTION><OPTION VALUE=60 >Dominica</OPTION><OPTION VALUE=61 >Dominican Republic</OPTION><OPTION VALUE=62 >East Timor</OPTION><OPTION VALUE=63 >Ecuador</OPTION><OPTION VALUE=64 >Egypt</OPTION><OPTION VALUE=65 >El Salvador</OPTION><OPTION VALUE=66 >Equatorial Guinea</OPTION><OPTION VALUE=67 >Eritrea</OPTION><OPTION VALUE=68 >Estonia</OPTION><OPTION VALUE=69 >Ethiopia</OPTION><OPTION VALUE=70 >Falkland Islands</OPTION><OPTION VALUE=71 >Faroe Islands</OPTION><OPTION VALUE=72 >Fiji</OPTION><OPTION VALUE=73 >Finland</OPTION><OPTION VALUE=74 >France</OPTION><OPTION VALUE=75 >French Guiana</OPTION><OPTION VALUE=76 >French Polynesia</OPTION><OPTION VALUE=77 >French Southern Territories</OPTION><OPTION VALUE=78 >Gabon</OPTION><OPTION VALUE=79 >Gambia</OPTION><OPTION VALUE=80 >Georgia</OPTION><OPTION VALUE=81 >Germany</OPTION><OPTION VALUE=82 >Ghana</OPTION><OPTION VALUE=83 >Gibraltar</OPTION><OPTION VALUE=84 >Greece</OPTION><OPTION VALUE=85 >Greenland</OPTION><OPTION VALUE=86 >Grenada</OPTION><OPTION VALUE=87 >Guadeloupe</OPTION><OPTION VALUE=88 >Guam</OPTION><OPTION VALUE=89 >Guatemala</OPTION><OPTION VALUE=90 >Guinea</OPTION><OPTION VALUE=91 >Guinea-Bissau</OPTION><OPTION VALUE=92 >Guyana</OPTION><OPTION VALUE=93 >Haiti</OPTION><OPTION VALUE=94 >Heard and Mc Donald Islands</OPTION><OPTION VALUE=95 >Holy See - Vatican City</OPTION><OPTION VALUE=96 >Honduras</OPTION><OPTION VALUE=97 >Hong Kong</OPTION><OPTION VALUE=98 >Hungary</OPTION><OPTION VALUE=99 >Iceland</OPTION><OPTION VALUE=100 >India</OPTION><OPTION VALUE=101 >Indonesia</OPTION><OPTION VALUE=102 >Iran, Islamic Republic</OPTION><OPTION VALUE=103 >Iraq</OPTION><OPTION VALUE=104 >Ireland</OPTION><OPTION VALUE=105 >Israel</OPTION><OPTION VALUE=106 >Italy</OPTION><OPTION VALUE=107 >Jamaica</OPTION><OPTION VALUE=108 >Japan</OPTION><OPTION VALUE=109 >Jordan</OPTION><OPTION VALUE=110 >Kazakstan</OPTION><OPTION VALUE=111 >Kenya</OPTION><OPTION VALUE=112 >Kiribati</OPTION><OPTION VALUE=113 >Korea, Peoples Republic</OPTION><OPTION VALUE=114 >Korea, Republic of</OPTION><OPTION VALUE=115 >Kuwait</OPTION><OPTION VALUE=116 >Kyrgyzstan</OPTION><OPTION VALUE=117 >Lao People's Republic</OPTION><OPTION VALUE=118 >Latvia</OPTION><OPTION VALUE=119 >Lebanon</OPTION><OPTION VALUE=120 >Lesotho</OPTION><OPTION VALUE=121 >Liberia</OPTION><OPTION VALUE=122 >Libyan Arab Jamahiriya</OPTION><OPTION VALUE=123 >Liechtenstein</OPTION><OPTION VALUE=124 >Lithuania</OPTION><OPTION VALUE=125 >Luxembourg</OPTION><OPTION VALUE=126 >Macau</OPTION><OPTION VALUE=127 >Macedonia</OPTION><OPTION VALUE=128 >Madagascar</OPTION><OPTION VALUE=129 >Malawi</OPTION><OPTION VALUE=130 >Malaysia</OPTION><OPTION VALUE=131 >Maldives</OPTION><OPTION VALUE=132 >Mali</OPTION><OPTION VALUE=133 >Malta</OPTION><OPTION VALUE=134 >Marshall Islands</OPTION><OPTION VALUE=135 >Martinique</OPTION><OPTION VALUE=136 >Mauritania</OPTION><OPTION VALUE=137 >Mauritius</OPTION><OPTION VALUE=138 >Mayotte</OPTION><OPTION VALUE=139 >Mexico</OPTION><OPTION VALUE=140 >Micronesia, Federated States</OPTION><OPTION VALUE=141 >Moldova, Republic of</OPTION><OPTION VALUE=142 >Monaco</OPTION><OPTION VALUE=143 >Mongolia</OPTION><OPTION VALUE=144 >Montserrat</OPTION><OPTION VALUE=145 >Morocco</OPTION><OPTION VALUE=146 >Mozambique</OPTION><OPTION VALUE=147 >Myanmar</OPTION><OPTION VALUE=148 >Namibia</OPTION><OPTION VALUE=149 >Nauru</OPTION><OPTION VALUE=150 >Nepal</OPTION><OPTION VALUE=151 >Netherlands</OPTION><OPTION VALUE=152 >Netherlands Antilles</OPTION><OPTION VALUE=153 >New Caledonia</OPTION><OPTION VALUE=154 >New Zealand</OPTION><OPTION VALUE=155 >Nicaragua</OPTION><OPTION VALUE=156 >Niger</OPTION><OPTION VALUE=157 >Nigeria</OPTION><OPTION VALUE=158 >Niue</OPTION><OPTION VALUE=159 >Norfolk Island</OPTION><OPTION VALUE=160 >Northern Mariana Islands</OPTION><OPTION VALUE=161 >Norway</OPTION><OPTION VALUE=162 >Oman</OPTION><OPTION VALUE=163 >Pakistan</OPTION><OPTION VALUE=164 >Palau</OPTION><OPTION VALUE=165 >Palestinian Territory</OPTION><OPTION VALUE=166 >Panama</OPTION><OPTION VALUE=167 >Papua New Guinea</OPTION><OPTION VALUE=168 >Paraguay</OPTION><OPTION VALUE=169 >Peru</OPTION><OPTION VALUE=170 >Philippines</OPTION><OPTION VALUE=171 >Pitcairn</OPTION><OPTION VALUE=172 >Poland</OPTION><OPTION VALUE=173 >Portugal</OPTION><OPTION VALUE=174 >Puerto Rico</OPTION><OPTION VALUE=175 >Qatar</OPTION><OPTION VALUE=176 >Reunion</OPTION><OPTION VALUE=177 >Romania</OPTION><OPTION VALUE=178 >Russian Federation</OPTION><OPTION VALUE=179 >Rwanda</OPTION><OPTION VALUE=180 >St. Helena</OPTION><OPTION VALUE=181 >Saint Kitts and Nevis</OPTION><OPTION VALUE=182 >Saint Lucia</OPTION><OPTION VALUE=183 >St. Pierre and Miquelon</OPTION><OPTION VALUE=184 >Saint Vincent - Grenadines</OPTION><OPTION VALUE=185 >Samoa (Independent)</OPTION><OPTION VALUE=186 >San Marino</OPTION><OPTION VALUE=187 >Sao Tome and Principe</OPTION><OPTION VALUE=188 >Saudi Arabia</OPTION><OPTION VALUE=189 >Senegal</OPTION><OPTION VALUE=190 >Seychelles</OPTION><OPTION VALUE=191 >Sierra Leone</OPTION><OPTION VALUE=192 >Singapore</OPTION><OPTION VALUE=193 >Slovakia</OPTION><OPTION VALUE=194 >Slovenia</OPTION><OPTION VALUE=195 >Solomon Islands</OPTION><OPTION VALUE=196 >Somalia</OPTION><OPTION VALUE=197 >South Africa</OPTION><OPTION VALUE=198 >South Georgia - South Sandwich</OPTION><OPTION VALUE=199 >Spain</OPTION><OPTION VALUE=200 >Sri Lanka</OPTION><OPTION VALUE=201 >Sudan</OPTION><OPTION VALUE=202 >Suriname</OPTION><OPTION VALUE=203 >Svalbard - Jan Mayen Islands</OPTION><OPTION VALUE=204 >Swaziland</OPTION><OPTION VALUE=205 >Sweden</OPTION><OPTION VALUE=206 >Switzerland</OPTION><OPTION VALUE=207 >Syrian Arab Republic</OPTION><OPTION VALUE=208 >Taiwan</OPTION><OPTION VALUE=209 >Tajikistan</OPTION><OPTION VALUE=210 >Tanzania</OPTION><OPTION VALUE=211 >Thailand</OPTION><OPTION VALUE=212 >Togo</OPTION><OPTION VALUE=213 >Tokelau</OPTION><OPTION VALUE=214 >Tonga</OPTION><OPTION VALUE=215 >Trinidad and Tobago</OPTION><OPTION VALUE=216 >Tunisia</OPTION><OPTION VALUE=217 >Turkey</OPTION><OPTION VALUE=218 >Turkmenistan</OPTION><OPTION VALUE=219 >Turks and Caicos Islands</OPTION><OPTION VALUE=220 >Tuvalu</OPTION><OPTION VALUE=221 >Uganda</OPTION><OPTION VALUE=222 >Ukraine</OPTION><OPTION VALUE=223 >United Arab Emirates</OPTION><OPTION VALUE=224 >United Kingdom</OPTION><OPTION VALUE=225 >United States</OPTION><OPTION VALUE=226 >United States Minor Islands</OPTION><OPTION VALUE=227 >Uruguay</OPTION><OPTION VALUE=228 >Uzbekistan</OPTION><OPTION VALUE=229 >Vanuatu</OPTION><OPTION VALUE=230 >Venezuela</OPTION><OPTION VALUE=231 >Viet Nam</OPTION><OPTION VALUE=232 >Virgin Islands (British)</OPTION><OPTION VALUE=233 >Virgin Islands (U.S.)</OPTION><OPTION VALUE=234 >Wallis and Futuna Islands</OPTION><OPTION VALUE=235 >Western Sahara</OPTION><OPTION VALUE=236 >Yemen</OPTION><OPTION VALUE=237 >Yugoslavia</OPTION><OPTION VALUE=238 >Zambia</OPTION><OPTION VALUE=239 >Zimbabwe</OPTION>
  </select>
  <button #minimize>Minimize Window</button>
  <button #hide>Hide and reveal window</button>
  <button #close>Close Window</button>
  <img src="sres:busy.png">
</body>
</html>
